 <template>
  <div id="earth-canvas" ref="earthCanvas"></div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'SatelliteManage',
 })
 </script>
 <script setup  lang="ts">
import World  from '@/Earth/world/Word'
import { SatelliteLargeScreenApi } from '@/api/satelliteLargeScreen'
const props = defineProps<{
  lonList:any
}>()
const satelliteConfig = {
  count:0,
  lonList:[]
}
async function getSatelliteCount(){
  const res = await SatelliteLargeScreenApi.reqGetSatelliteCount()
  satelliteConfig.count = res.data.count
}
const earthCanvas = ref<HTMLElement>()
async function getSatelliteLonList(){
  const res = await SatelliteLargeScreenApi.reqGetSatelliteLonList()
  satelliteConfig.lonList = res.data.lonList
 }
 watch(props.lonList, async () => {
  if(!props.lonList.length) return
  if (earthCanvas.value) {
    earthCanvas.value.innerHTML = ''
  }
  new World({
    dom: earthCanvas.value,
    count: 3,
    lonList: props.lonList
  })
}, {
  deep: true
})

</script>
 
 <style  lang="scss" >
 #earth-canvas{
    height: 100%;
    width: 100%;
    top:12%;
    left: 0.5%;
    position: absolute;
 }
 
 #html2canvas {
   position: absolute;
   z-index: -1;
   left: 0;
   top:0;
   background: rgba(0, 0, 0, 0);
 }
 .css3d-wapper {
   pointer-events: none;
   color: #fff;
 }
 

</style>
 